<!DOCTYPE html>
<!--
项目模板
复制部分需要改以下内容：

左侧菜单高亮提示 line 255: 添加 class="active"

导航栏页面内容 line 300:
-->
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/html_head :: head(~{::title},~{::link},~{})">
  <title>解析文档</title>
  <!-- daterange picker -->
  <link href="https://cdn.bootcss.com/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css" rel="stylesheet">
  <!-- bootstrap datepicker -->
  <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- 主 头部 -->
  <header th:insert="common/top :: top"></header>
  <!-- 左侧菜单，包含logo、搜索、菜单-->
  <aside th:insert="common/left :: left"></aside>


  <!-- Content Wrapper. 页面内容 -->
  <div class="content-wrapper">
    <!-- 页面头部  -->
    <section class="content-header">
      <h1>
        上传文档
        <small>上传 <b>Excel</b> 或 <b>csv</b> 文件，根据解析策略快速生成收集表，生成后可在线二次编辑。</small>
      </h1>
      <!-- 导航栏 -->
      <ol class="breadcrumb">
          <li><a href="/index"><i class="fa fa-dashboard"></i> 主页</a></li>
          <li><a href="/collect/new"> 发起收集</a></li>
        <li class="active">上传文档</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">

      <!--------------------------
        |      页面内容放在这      |
        -------------------------->
      <div class="row">
        <div class="col-md-12">

          <div class="box">

            <div class="box-body">
              <form action="/collect/new/byUpload.action" id="tableForm" method="POST" enctype="multipart/form-data">
                  <h3 class="box-title">
                    源文件:
                  </h3>
                  <input type="file" id="input-upload" single name="file"
                         accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;application/vnd.ms-excel"
                          required="required">
                <hr>
                  <h3>解析策略</h3>
                <!--<div class="form-group">
                  <select class="form-control select2" style="width: 70%;">
                    <option selected="selected">默认策略</option>
                  </select>
                </div>-->

                <div style="overflow:auto;">
                  <table class="table table-striped">
                    <thead>
                    <tr>
                      <th style="width:20%">表名</th>
                      <th style="width:15%">第几张表</th>
                      <th style="width:15%">字段所在行</th>
                      <th style="width:15%"> 起始列</th>
                      <th style="width:15%">字段数</th>
                      <th style="width:10%">默认值</th>
                    </tr>
                    </thead>

                    <tbody id="table-tbody">
                    <tr id="table-item-1">
                      <!--<th><input class="form-control" type="text" th:placeholder="策略名"
                                 onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5\w]/g,'')">
                      </th>-->
                      <th>
                        <div class="form-group">
                          <select class="form-control select2" name="tableNameBy" id="tableNameBy" onchange="autoSetFieldLine()">
                            <option value="false">文件名</option>
                            <option value="true">表第一行</option>
                          </select>
                        </div>
                      </th>
                      <th>
                        <input class="form-control" type="text" placeholder="第几个表" value="1" name="sheetIndex"
                                 onkeyup="this.value=this.value.replace(/\D/g,'');if(this.value>50)this.value = 50;" maxlength=2
                                 required="required" >
                      </th>
                      <th>
                        <input class="form-control" type="text" placeholder="字段所在行" value="0" name="fieldLine" id="fieldLine"
                                 onkeyup="this.value=this.value.replace(/\D/g,'');if(this.value>50)this.value = 50;" maxlength=2
                                 required="required">
                      </th>
                      <th>
                        <input class="form-control" type="text" placeholder="起始列" value="0" name="fieldStart"
                                 onkeyup="this.value=this.value.replace(/\D/g,'');if(this.value>50)this.value = 50;" maxlength=2
                                 required="required">
                      </th>

                      <th>
                        <input class="form-control" type="text" placeholder="字段数" value="50" name="fieldNum"
                                 onkeyup="this.value=this.value.replace(/\D/g,'');if(this.value>50)this.vale = 50;" maxlength=2
                                 required="required">
                      </th>
                      <th>
                        <label>
                          <input type="checkbox" class="flat-red" checked="checked" name="withDefaultValue">
                        </label>
                      </th>

                    </tr>
                    </tbody>
                  </table>
                </div>
                <div class="col-sm-2" style="float:right">
                  <button class="btn btn-block btn-danger">
                    <i class="fa fa-save"> </i> 解析
                  </button>
                </div>
              </form>
              <small><b>注：字段数</b> 最多为50列，如少于所填数目，则为实际数目。 <b>默认值</b> 为字段名的下一行单元格的内容。</small>
              <div class="col-sm-2" style="float:right">
                <!--<button class="btn btn-block btn-danger"> &lt;!&ndash;id="btn-commit" data-toggle="modal" data-target="#saveBtnModal"&ndash;&gt;
                    <i class="fa fa-save"> </i> 解析
                </button>-->
                  <div class="modal fade" id="saveBtnModal" tabindex="-1" role="dialog" aria-labelledby="saveBtnModalLabel" aria-hidden="true">
                      <div class="modal-dialog">
                          <div class="modal-content">
                              <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                      &times;
                                  </button>
                                  <h4 class="modal-title" id="saveBtnModalLabel">解析成功</h4>
                              </div>
                              <div class="modal-footer">
                                  <button type="button" class="btn btn-primary" data-dismiss="modal">确定
                                  </button>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>


            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->

      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- 页脚 -->
  <footer th:insert="common/bottom :: footer">
  </footer>
  <!-- Control Sidebar 右侧边栏 -->
  <aside th:insert="common/right :: aside"></aside>
  <!-- 右侧边栏的背景，必须紧接着control sidebar放这个  -->
  <div th:insert="common/right :: aside2"></div>
</div>
<!-- ./wrapper -->

<!-- Js 脚本 -->
<div th:insert="common/html_js :: div_js"></div>
<!-- Page script -->
<script type="text/javascript">

    function autoSetFieldLine(){
        if ($("#tableNameBy").val() == "false")
            $("#fieldLine").val("0");
        else
            $("#fieldLine").val("1");
    }

    $(function () {
        //Initialize Select2 Elements
        $('.select2').select2()


        //iCheck for checkbox and radio inputs
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass   : 'iradio_minimal-blue'
        })
        //Red color scheme for iCheck
        $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
            checkboxClass: 'icheckbox_minimal-red',
            radioClass   : 'iradio_minimal-red'
        })
        //Flat red color scheme for iCheck
        $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass   : 'iradio_flat-green'
        })

    });

    //table 异步提交 解析按钮
    $("#btn-commit").click(function(){
        var targetUrl = $("#tableForm").attr("action");
        var data = $("#tableForm").serialize();
        $.ajax({
            type:'post',
            url:targetUrl,
            processData:false,
            contentType:false,
            data:data,
            success:function(data){
                data = $.parseJSON(data);
                if(data.message == "success"){
                    $("#saveBtnModalLabel").text("解析成功");
                    //跳转到编辑
                }else{
                    $("#saveBtnModalLabel").text("解析失败" + data.detail);
                }
            },
            error:function(){
                $("#saveBtnModalLabel").text("解析出错");
            }
        })

    });
</script>
</body>
</html>